<style type="text/css">
  .bg-area{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -999;
  }
  .bg-area .bg-img{
    position: absolute;
    left: 10%;
    bottom: 0px;
    width: 759px;
    height: 309px;
  }
  .bg-area .logo-img{
    position: absolute;
    right: 20px;
    top: 30px;
    width: 88px;
    height: 26px;
  }
  .title-area{
    margin-top: 16%;
    font-size: 2.6em;
    color: #383838;
  }
  .seat-area{
    font-size: 1.6em;
    margin-top: 5%;
    color: #484848;
  }
  .seat-area p{
    margin-bottom: 0px;
  }
  .return-area{
    margin-top: 6%;
  }
  .return-area button{
    width: 30%;
    background-color: #005bac;
    color:#ffffff;
    border-radius: 10px;
    height: 50px;
    font-size: 1.4em;
  }
  .seconds{
    color: #005bac;
  }
  .return-msg{
    margin-top: 2%;
  }
  .number-paragraph{
    color: #00953F;
    font-size: 1.5em;
    margin-top: 12px;
  }
  .mssage-box{
    opacity: 0;
    cursor: default;
  }
  @media screen and (min-width: 1400px){
    .title-area{
      font-size: 3em;
    }
    .seat-area{
      font-size: 1.8em;
    }
    .return-msg{
      font-size: 1.2em;
    }
    .return-area button{
      height: 60px;
      font-size: 1.6em;
    }
    .number-paragraph{
      font-size: 1.7em;
    }
    .bg-area .bg-img{
      width: 800px;
      height: 329px;
    }
    .bg-area .logo-img{
      width: 92px;
      height: 28px;
    }
  }
  @media screen and (min-width: 1600px){
    .title-area{
      font-size: 3.6em;
    }
    .seat-area{
      font-size: 2.6em;
    }
    .return-msg{
      font-size: 1.8em;
    }
    .return-area button{
      height: 90px;
      font-size: 2.4em;
    }
    .number-paragraph{
      font-size: 2.5em;
    }
    .bg-area .bg-img{
      width: 900px;
      height: 379px;
    }
    .bg-area .logo-img{
      width: 102px;
      height: 33px;
    }
  }
</style>
<title>座位查询</title>
<div id="session-id" class="hidden" data-session-id=<%= params[:session_id]%>></div>
<div id="event-id" class="hidden" data-event-id=<%= current_event.id%>></div>
<div class="container-fluid">
  <div class="row">
    <div class="bg-area">
      <%= image_tag current_event.seat_search_bg.url, class:"bg-img"%>
      <%= image_tag 'attendee_seats/logo.png', class:"logo-img"%>
    </div>
    <div class="col-xs-6 col-xs-offset-3 text-center page-area">
      <div class="title-area">座位自助查询</div>
      <% if @seat.present? %>
        <div class="seat-area success-message">
          <p><span id="attendee-name"><%= @attendee.name %></span> 先生/女士，您的座位在</p>
          <% unit = '桌' %>
          <% unit = '排' if 'row'==@session_seat.properties['unit']%>

          <% if 'true'==@session_seat.properties['set_table_num']%>
            <p class="number-paragraph">第 <span class="table-num"><%=@seat.table_row%></span> <%= unit %><span id="table-col"><%=@seat.table_col%></span>号</p>
          <% else %>
            <p class="number-paragraph">第 <span class="table-num"><%=@seat.table_row%></span> <%= unit %></p>
          <% end %>
        </div>
      <% else %>
        <div class="seat-area failure-message">
          <p>很抱歉，没有找到您的座位信息。</p>
          <p>请联系您的担当销售。</p>
        </div>
      <% end %>
      <div class="return-area">
        <a href="javascript:;" onclick="javascript:history.back(-1);">
          <button type="button">返 回</button>
        </a>
      </div>
      <div class="return-msg">
        <p>将在<span class="seconds">3</span>秒后自动返回</p>
      </div>
    </div>
  </div>
</div>
<div class="row" style="text-align: center;">
  <%= form_tag event_attendee_seat_path(current_event, params[:session_id]), id: 'attendee-keyword', method: 'get' do %>
    <input class="mssage-box" name="keyword" type="text"/>
    <input class="hidden" name="session_id" value=<%= params[:session_id] %>>
  <% end %>
</div>

<% content_for :script do %>
  <script type="text/javascript">
    var AttendeeSeatShow = {
      countDownTime: 2,
      timer: null,

      countDown: function(){
        var self = AttendeeSeatShow;

        self.timer = setInterval(function(){
          $('.seconds').html(self.countDownTime);
          self.countDownTime--;
          if(self.countDownTime == -1)
          {
            clearInterval(self.timer);
            history.back(-1);
          }
        },1000);
      },

      onLoadSeatSuccess: function(event){
        var self = AttendeeSeatShow;
        self.countDownTime = 2;
        self.countDown();

        var collection_item = event.collection[0];
        var seat = collection_item.seat;
        var attendee = collection_item.attendee;
        var session_seat = collection_item.session_seat;
        var seat_info = "";
        var unit = '桌';
        if('row'==session_seat.properties.unit){
          unit = '排';
        }
        $('.seat-area').empty();

        var user_name = "<p><span id='attendee-name'>"+attendee.name+"</span> 先生/女士，您的座位在</p>";
        if('true'==session_seat.properties.set_table_num){
          seat_info = "<p class='number-paragraph'>第 <span class='table-num'>"+seat.table_row+"</span>"+unit+"<span id='table-col'>"+seat.table_col+"</span>号</p>";
        }else{
          seat_info = "<p class='number-paragraph'>第 <span class='table-num'>"+seat.table_row+"</span>"+unit+"</p>";
        }

        $('.seat-area').html(user_name+seat_info);
      },

      onLoadSeatFailure: function(event){
        var self = AttendeeSeatShow;
        self.countDownTime = 2;
        self.countDown();
        $('.seat-area').empty();
        var error_message = "<p>很抱歉，没有找到您的座位信息。</p><p>请联系您的担当销售。</p>";
        $('.seat-area').html(error_message);
      },

      onEnterkeyPressed: function(event){
        var self = AttendeeSeatShow;
        var keyCode = event.which||event.keyCode;
        if(keyCode == 13)
        {
          clearInterval(self.timer);
          var url = "/app/events/"+$('#event-id').data('event-id')+"/attendee_seats/~.json";
          $.get(url,{
            session_id: $('#session-id').data('session-id'),
            keyword: $('.mssage-box').val()
          },
          self.onLoadSeatSuccess).error(self.onLoadSeatFailure);
          $('.mssage-box').val("");
        }
      },

      initialize: function(){
        var self = AttendeeSeatShow;
        $('.mssage-box').focus();
        $(document).click(function(){
          $('.mssage-box').focus();
        });
        $('.mssage-box').keypress(self.onEnterkeyPressed);
        self.countDown();
      }
    };

    $(document).ready(function(){
      AttendeeSeatShow.initialize();
    });
  </script>
<% end %>